/********************************************************************************
 *@fileName: index.jsx
 *@description: 群聊管理
 *@author: Xhd
 *@API: 高贤亮
 *@Product: 佘行通
 *@date: 2024-05-21 09:21:57
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import TheImage from '@/components/TheImage';
import ThePagination from '@/components/ThePagination';
import TheButton from '@/components/TheButton';
import { apiGetChatGroupPage, apiDismissGroup } from '@/request/groupChat';

class GroupChat extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columns: [
        {
          title: '群聊ID',
          dataIndex: 'groupId',
          key: 'groupId',
        },
        {
          title: '头像',
          dataIndex: 'groupAvatar',
          key: 'groupAvatar',
          render: (text) => {
            return <TheImage src={text} alt="" width={50} height={50} />
          }
        },
        {
          title: '群名称',
          dataIndex: 'groupName',
          key: 'groupName',
        },
        {
          title: '群注册时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '群解散时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
          render: (text, record) => {
            return <span>{record.groupState === "DISMISS" ? text : '-'|| '-'}</span>;
          }
        },
        {
          title: '状态',
          dataIndex: 'groupState',
          key: 'groupState',
          render: (text) => {
            return <span>{text === 'NORMAL' ? '正常' : '解散'}</span>;
          }
        },
        {
          title: '群人数',
          dataIndex: 'memberCount',
          key: 'memberCount',
        },
        {
          title: '群主ID',
          dataIndex: 'createUser',
          key: 'createUser',
          render: (text) => {
            return <TheButton onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</TheButton>
          }
        },
        {
          title: '操作',
          render: (_, record) => {
            return <TheButton haspermi={['groupChat:dismiss']} onClick={() => this.dismissGroup(record)} >解散群组</TheButton>
          }
        },
      ],
      searchOption: [
        { field: 'groupId', label: '群聊ID', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'time', label: '注册时间', placeholder: '请选择', type: 'RangePicker', required: false, rules: [], defaultValue: " " },
        { field: 'groupName', label: '群名称', placeholder: '请输入', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'groupState', label: '群状态', placeholder: '请选择', type: 'Select', options: [{ label: '正常', value: 'NORMAL' }, { label: '解散', value: 'DISMISS' }] },
      ],
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      searchValue: {},
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData = async () => {
    const { pageData, searchValue } = this.state;
    if (searchValue.time) {
      searchValue.startTime = searchValue.time[0].format('YYYY-MM-DD') + ' 00:00:00'
      searchValue.endTime = searchValue.time[1].format('YYYY-MM-DD') + ' 23:59:59'
      delete searchValue.time
    }
    const params = { ...pageData, ...searchValue };
    await apiGetChatGroupPage(params).then((res) => {
      if (res.code === 0) {
        this.setState({ dataSource: res.data, total: res.totalCount })
      }
    })
  }

  onFormSearch = (values) => {
    const params = { ...values };
    this.setState({ searchValue: params, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }

  onReset = () => {
    this.queryFormRef.formRef.resetFields();
    this.setState({ searchValue: {}, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({ pageData: { pageNo, pageSize } }, () => {
      this.getData()
    })
  }

  dismissGroup = async (record) => {
    React.$confirm({
      title: '解散群组提示',
      content: `确定解散当前群组？`,
      onOk: async () => {
        const params = { groupId: record.groupId };
        await apiDismissGroup(params).then((res) => {
          if (res.code === 0) {
            React.$message({
              type: 'success',
              content: '解散成功'
            });
            this.getData()
          }
        })
      }
    })
  }

  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, searchOption, } = this.state;
    return (<div className='p-layout-box'>
      <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} />
      <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
    </div>)
  }
}

export default GroupChat